<template>
	<div class="details-box">
		<div class="step-box">
			<el-steps class="step" :active="active" process-status="wait">
				<el-step title="提交订单" description="2018-07-19 15:43:23" icon="el-icon-circle-check"></el-step>
				<el-step title="支付订单" description="2018-07-19 15:43:23" icon="el-icon-circle-check"></el-step>
				<el-step title="平台发货" description="2018-07-19 15:43:23" icon="el-icon-circle-check"></el-step>
				<el-step title="确认收货" description="2018-07-19 15:43:23" icon="el-icon-circle-check"></el-step>
				<el-step title="完成评价" description="2018-07-19 15:43:23" icon="el-icon-circle-check"></el-step>
			</el-steps>
		</div>
		<div class="details-container">
			<div class="header">
				<div class="left">当前订单状态：代发货</div>
				<div class="buttonBox">
					<el-button size="small">修改发票信息</el-button>
					<el-button size="small">修改发票信息</el-button>
					<el-button size="small">修改发票信息</el-button>
					<el-button size="small">修改发票信息</el-button>
					<el-button size="small">修改发票信息</el-button>
				</div>
			</div>
			<div class="content">
				<!-- 基本信息 -->
				<div class="module-box base-info">
					<div class="title">
						<i class="el-icon-s-flag title-content"></i>
						基本信息
					</div>
					<div class="table-imitate">
						<div class="table-module" v-for="(item, i) in baseInfo" :key="i">
							<div class="table-th">{{ item.title }}</div>
							<div class="table-tr">{{ item.value }}</div>
						</div>
					</div>
				</div>
				<!-- 收货人信息 -->
				<div class="module-box receiver-info">
					<div class="title">
						<i class="el-icon-s-flag title-content"></i>
						收货人信息
					</div>
					<div class="table-imitate">
						<div class="table-module receiver-module" v-for="(item, i) in receiverInfo" :key="i">
							<div class="table-th">{{ item.title }}</div>
							<div class="table-tr">{{ item.value }}</div>
						</div>
					</div>
				</div>
				<!-- 商品信息 -->
				<div class="module-box receiver-info">
					<div class="title">
						<i class="el-icon-s-flag title-content"></i>
						商品信息
					</div>
					<div class="table-box">
						<el-table :data="tableData" border>
							<el-table-column prop="imgUrl" label="商品图片" width="180" align="center"></el-table-column>
							<el-table-column prop="name" label="商品名称" width="180" header-align="center" align="left"></el-table-column>
							<el-table-column prop="address" label="价格/货号" header-align="center" align="left"></el-table-column>
							<el-table-column prop="address" label="属性" header-align="center" align="left"></el-table-column>
							<el-table-column prop="address" label="数量" align="center"></el-table-column>
							<el-table-column prop="address" label="库存" align="center"></el-table-column>
							<el-table-column prop="address" label="小计" align="center"></el-table-column>
						</el-table>
						<div class="total">
							<div class="total-title">合计:</div>
							<div class="total-number">¥19198.00</div>
						</div>
					</div>
				</div>
				<!-- 费用信息 -->
				<div class="module-box receiver-info">
					<div class="title">
						<i class="el-icon-s-flag title-content"></i>
						费用信息
					</div>
					<div class="table-imitate">
						<div class="table-module receiver-module" v-for="(item, i) in costInfo" :key="i">
							<div class="table-th">{{ item.title }}</div>
							<div class="table-tr">{{ item.value }}</div>
						</div>
					</div>
				</div>
				<!-- 操作信息 -->
				<div class="module-box receiver-info">
					<div class="title">
						<i class="el-icon-s-flag title-content"></i>
						操作信息
					</div>
					<div class="table-box">
						<el-table :data="tableData" border>
							<el-table-column prop="imgUrl" label="操作者" width="180" align="center"></el-table-column>
							<el-table-column prop="name" label="操作时间" width="180"  align="center"></el-table-column>
							<el-table-column prop="address" label="订单状态"  align="center"></el-table-column>
							<el-table-column prop="address" label="付款状态"  align="center"></el-table-column>
							<el-table-column prop="address" label="发货状态" align="center"></el-table-column>
							<el-table-column prop="address" label="备注" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			active: 2,
			baseInfo: [
				{
					title: '订单编号',
					value: '201807196398345'
				},
				{
					title: '发货单流水号',
					value: '未发货'
				},
				{
					title: '用户账号',
					value: '18000000000'
				},
				{
					title: '支付方式',
					value: '未支付'
				},
				{
					title: '订单来源',
					value: 'APP订单'
				},
				{
					title: '订单类型',
					value: '普通订单'
				},
				{
					title: '配送方式',
					value: '未发货'
				},
				{
					title: '物流单号',
					value: '未发货'
				},
				{
					title: '自动确认收货时间',
					value: '15天'
				},
				{
					title: '活动信息',
					value: '满100减10'
				}
			],
			receiverInfo: [
				{
					title: '收货人',
					value: '小匠'
				},
				{
					title: '手机号码',
					value: '18000000000'
				},
				{
					title: '邮政编码',
					value: '888666'
				},
				{
					title: '收货地址',
					value: '上海市浦东区东方明珠10层'
				}
			],
			costInfo: [
				{
					title: '商品合计',
					value: '¥19198.00'
				},
				{
					title: '运费',
					value: '18000000000'
				},
				{
					title: '优惠卷',
					value: '888666'
				},
				{
					title: '活动优惠',
					value: '上海市浦东区东方明珠10层'
				},
				{
					title: '订单总金额',
					value: '¥19198.00'
				},
				{
					title: '应付款金额',
					value: '¥19198.00'
				}
			],
			tableData: [
				{
					imgUrl: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}
			]
		}
	}
}
</script>

<style scoped lang="less">
.details-box {
	width: 100%;
	padding: 20px 10px;
	.step-box {
		// width: 100%;
		padding: 0 100px;
		/deep/ .step {
			width: 100%;
			.el-step__icon {
				background-color: #f9f9f9;
				.el-step__icon-inner {
					font-size: 50px;
				}
			}
			.el-step__title.is-process {
				font-weight: 400;
			}
		}
	}
	.details-container {
		width: 100%;
		.header {
			margin-top: 20px;
			display: flex;
			height: 80px;
			background-color: rgba(243, 243, 243, 1);
			border-width: 1px;
			border-style: solid;
			border-color: rgba(228, 228, 228, 1);
			font-size: 16px;
			color: #f04844;
			line-height: 28px;
			padding: 0 35px;
			justify-content: space-between;
			align-items: center;
		}
		.content {
			background-color: #fff;
			padding: 0 30px;
			.module-box {
				padding-top: 40px;
				.title {
					font-size: 16px;
					.title-content {
						padding-left: 2px;
					}
				}
				.table-imitate {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20px;
					.receiver-module {
						width: 25% !important;
					}
					.table-module {
						box-sizing: border-box;
						text-align: center;
						margin-right: -1px;
						margin-bottom: -1px;
						width: 16.666%;
						.table-th {
							height: 45px;
							line-height: 45px;
							// width: 173px;
							border: 1px solid #e4e4e4;
							font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
							font-weight: 700;
							font-style: normal;
							font-size: 14px;
							color: #666666;
							border-bottom: none;
							background-color: #f9fafc;
						}
						.table-tr {
							height: 60px;
							line-height: 60px;
							// width: 173px;
							border: 1px solid #e4e4e4;
						}
					}
				}
			}
		}
	}
}
.table-box {
	margin-top: 20px;
	.total {
		height: 60px;
		background-color: rgba(249, 250, 252, 1);
		border: 1px solid rgba(228, 228, 228, 1);
		display: flex;
		justify-content: right;
		align-items: center;
		font-size: 16px;
		text-align: right;
		line-height: 40px;
		padding-right: 20px;
		.total-number {
			margin-left: 10px;
			font-weight: 700;
			color: #f04844;
		}
	}
}
</style>
